<template>
    <div class="homeTop">
        <div class="banner">
                <van-swipe :autoplay="3000" lazy-render>
                        <van-swipe-item v-for="image in banner" :key="image">
                            <img :src="image" />
                        </van-swipe-item>
                </van-swipe>

        </div>
        <p>热门视频</p>
        <div class="hotVedio">

            <van-grid :border="false" :column-num="2">
                <van-grid-item v-for="image in hotVedio" :key="image" @click="addCart(image)">
                    <img :src="image.img" />
                </van-grid-item>
            </van-grid>
        </div>
    </div>
</template>
<script lang="ts">
import {defineComponent, getCurrentInstance, reactive} from 'vue';

export default defineComponent({
    name:'homeTop',
    setup(){
        //获取当前实例，类似于vue2的this
        const {proxy}:any =getCurrentInstance();
        //创建一个常量
        const banner=reactive([
            'https://tse1-mm.cn.bing.net/th/id/R-C.29a2e8c9daf663e8fb6f892d8de52ef1?rik=Do%2bwiIVFOb01pQ&riu=http%3a%2f%2fup.deskcity.org%2fpic_source%2f29%2fa2%2fe8%2f29a2e8c9daf663e8fb6f892d8de52ef1.jpg&ehk=TxHHsTJdHdpueZoButoFv5VosEaUGbS%2fSOYMp4s2II8%3d&risl=&pid=ImgRaw&r=0',
            'https://tse1-mm.cn.bing.net/th/id/R-C.788a3ca3fc34a8f457b6a9a582cbebd6?rik=Nlwza%2bi%2f1I2W4Q&riu=http%3a%2f%2fimg.pptjia.com%2fimage%2f20180117%2f16e6d1b2adcb7796e411899957f5f686.jpg&ehk=4%2bqM6f6DYFdLm6Cu4IPioBdsQT5fiqSYmQ073igic8Y%3d&risl=&pid=ImgRaw&r=0',
            'https://tse1-mm.cn.bing.net/th/id/R-C.06a21f77a7928a13f30885bbbe527c3f?rik=yC5KttaeGjlrfg&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2fe%2f72%2f10064b055b.jpg%3fdown&ehk=JuUbMZ%2bS3C3m5FXazWYNez9dmpwVrqKho3rAXY%2baubY%3d&risl=&pid=ImgRaw&r=0'
        ]);


        //模拟的数据
        const hotVedio=reactive([
            {cartCount:0,title:'java',img:'https://tse1-mm.cn.bing.net/th/id/R-C.06a21f77a7928a13f30885bbbe527c3f?rik=yC5KttaeGjlrfg&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2fe%2f72%2f10064b055b.jpg%3fdown&ehk=JuUbMZ%2bS3C3m5FXazWYNez9dmpwVrqKho3rAXY%2baubY%3d&risl=&pid=ImgRaw&r=0'},
           {cartCount:0,title:'spring',img:'https://tse1-mm.cn.bing.net/th/id/R-C.06a21f77a7928a13f30885bbbe527c3f?rik=yC5KttaeGjlrfg&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2fe%2f72%2f10064b055b.jpg%3fdown&ehk=JuUbMZ%2bS3C3m5FXazWYNez9dmpwVrqKho3rAXY%2baubY%3d&risl=&pid=ImgRaw&r=0'},
           {cartCount:0,title:'springboot',img:'https://tse1-mm.cn.bing.net/th/id/R-C.06a21f77a7928a13f30885bbbe527c3f?rik=yC5KttaeGjlrfg&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2fe%2f72%2f10064b055b.jpg%3fdown&ehk=JuUbMZ%2bS3C3m5FXazWYNez9dmpwVrqKho3rAXY%2baubY%3d&risl=&pid=ImgRaw&r=0'},
           {cartCount:0,title:'springcloud',img:'https://tse1-mm.cn.bing.net/th/id/R-C.06a21f77a7928a13f30885bbbe527c3f?rik=yC5KttaeGjlrfg&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2fe%2f72%2f10064b055b.jpg%3fdown&ehk=JuUbMZ%2bS3C3m5FXazWYNez9dmpwVrqKho3rAXY%2baubY%3d&risl=&pid=ImgRaw&r=0'},
           {cartCount:0,title:'mybatis',img:'https://tse1-mm.cn.bing.net/th/id/R-C.9ea1b37847b8046be732774efd4ecf90?rik=By4MTYLQliRtlg&riu=http%3a%2f%2fwww.10wallpaper.com%2fwallpaper%2f1366x768%2f1301%2fPure_beautiful_photo_HD_desktop_wallpaper_06_1366x768.jpg&ehk=gUzB9wVIxO6fyoViayxoKVhNMpsNyN7xZtI90D3bjfo%3d&risl=&pid=ImgRaw&r=0'},
           {cartCount:0,title:'mysql',img:'https://tse1-mm.cn.bing.net/th/id/R-C.9bab93c3e5dc9c28114f8525089d3b80?rik=w%2b4NrbdYLmTxsw&riu=http%3a%2f%2fwww.dnzhuti.com%2fuploads%2fallimg%2f170510%2f95-1F510151P5.jpg&ehk=ZNVeqcs54rWRf4oLLyVvqk3j906%2b328KftYy0iO%2fPO0%3d&risl=&pid=ImgRaw&r=0'},
           {cartCount:0,title:'linux',img:'https://tse1-mm.cn.bing.net/th/id/R-C.f5f2d36f9ae481fc53792032152bba12?rik=OqYfVKF%2bSMRT%2fw&riu=http%3a%2f%2fwww.pc354.com%2fxupl0ad%2fnews%2f201508%2f2015825115474890.jpg&ehk=zSyCN%2b1Bg3bdfNWAQU4JrIhDU18ibrNnygKQy%2fesHl8%3d&risl=&pid=ImgRaw&r=0'},
           {cartCount:0,title:'js',img:'https://tse1-mm.cn.bing.net/th/id/R-C.4e739d611d9bb5b38aacf800c5cb3be2?rik=lidU4P%2bkjZkwaw&riu=http%3a%2f%2fwww.dnzhuti.com%2fuploads%2fallimg%2f170510%2f95-1F510151P2.jpg&ehk=CxEKtinkvlFOXNTtwnpRIM0sKjNE3eZgFzML4GVCNYY%3d&risl=&pid=ImgRaw&r=0'},
           {cartCount:0,title:'html',img: 'https://tse1-mm.cn.bing.net/th/id/R-C.e4015ec57f69c38b10297446d5818930?rik=GDpf16R8zvVRTg&riu=http%3a%2f%2fwww.dnzhuti.com%2fuploads%2fallimg%2f180504%2f95-1P504150P7.jpg&ehk=U%2bsDe5s4DpoTiSUYDga26LW4K7p95N90cZiS6bpD9kQ%3d&risl=&pid=ImgRaw&r=0'},
           {cartCount:0,title:'css',img:'https://tse1-mm.cn.bing.net/th/id/R-C.4f606d80c93238cdaa527e2e77567d2e?rik=3CGID5G%2bmq4R7g&riu=http%3a%2f%2fwww.dnzhuti.com%2fuploads%2fallimg%2f170712%2f95-1FG21HR0.jpg&ehk=sqDyrNAvY0LOy%2b%2fzwhkuyB7CkvKauo7dGhanOe7cLH8%3d&risl=&pid=ImgRaw&r=0'},
           {cartCount:0,title:'json',img:'https://tse1-mm.cn.bing.net/th/id/R-C.28407a36517b5ae690799f8dfc0708c9?rik=fgKaBjr2RS5lZQ&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fPeople%2ffemales%2f20180419%2f11a806812f14b1f4fb327c8525d065cc.jpg&ehk=lGUWMIpTvtaCaJEsU6IIaDmzAg2oFY1al8DoMGqUj%2b8%3d&risl=&pid=ImgRaw&r=0'}
        ]);
        //加入购物车函数
        function addCart(image){
            proxy.$toast({
                message:'已添加入购物车'
            })
            proxy.$store.commit('addCart',image);
        }
        
        //这里要暴露出来
        return{
            banner,
            hotVedio,
            addCart
        }
    }
})
</script>
<style lang='scss' scoped>
.banner img{
    width: 100%;
    height: 150px;
}
.hotVedio{
  margin-bottom: 100px;
}
.van-grid-item img{
    width: 100%;
    height: 100px;
}
</style>